<template>
  <div style="height:100%;width:100%;">
    <div class="lineData" style="height:100%;width:100%;" id="volumeAccumIncome"></div>
  </div>
</template>
 <script>
export default {
  name: "lineData",
 props: {
   completeData: {
     type: Object,
     default: () => {
       return {};
     }
   },
   name:{
     type:String,
     default(){
       return ''
     }
   }
 },
 watch:{
   completeData(val){
   // var minData = Math.min.apply(null, val.yAxis)<=Math.min.apply(null, val.y1Axis)?Math.min.apply(null, val.yAxis):Math.min.apply(null, val.y1Axis);
     this.getPie(val);
   }
 },
 // mounted(){
 //   echarts.init(document.getElementById('volumeAccumIncome'))
 // },
  methods: {
    getPie(val) {
      const that = this;
      var myChart = this.$echarts.init(document.querySelector(".lineData"));
      let nameIndex = val.xAxis.indexOf(this.name)
      val.yAxis = val.yAxis.map((map,index)=>{
        if(index == nameIndex){
          return {
            value:map,
            itemStyle: {
              barBorderRadius : Number(map) > 0 ? [10,10,0,0] : [0,0,10,10],
              color: '#7ed093',
              },
          }
        }else {
          return {
            value:map,
            itemStyle: {
              barBorderRadius : Number(map) > 0 ? [10,10,0,0] : [0,0,10,10],
            }
          }
        }
      })
      let option = {
          tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "shadow",
                },
                formatter: '{b} <br /> {a0}: {c0}'+ "%"
              },
        grid: {
          top:'40px',
          left: "40px",
          right: "30px",
          bottom:'30px',
         },
          legend: {
                 data: ['年度完成率']
             },
      xAxis: {
       type: 'category',
       // boundaryGap: false,
       axisLabel: {
         interval:0,
         rotate:40 ,
         },
       data:val.xAxis,
       axisLine:{
         show:true,
         lineStyle:{
           color:'#9399b6',
         },
       }
       },
        yAxis: [
              {
                  type: 'value',
                  // min:  minData*2,
                  // max:20,
                  splitLine:{show: true,
                  lineStyle:{
                      type: 'dashed'
                  }},  //去除网格线
                  // max: maxData*2,
                  // // interval: 50,
                  axisLabel: {
                      formatter: '{value} %',
                      show:true
                  },
                  axisTick:{ //y轴刻度线
                      show:false
                  },
                  axisLine:{ //y轴
                      show:true,
                      lineStyle:{
                        color:'#9399b6',
                      },
                  },
              },

            ],

        series: [
          {
            type: "bar",
             name: '年度完成率',
            smooth: true,
            data:val.yAxis,
            barWidth :20,
            itemStyle : {
              normal: {
                color: '#7f92f7',
                label : {
                  show: true,
                  position: 'top',
                    formatter:"{c}%",
                  },
               },
            },
          },
      ],
      };
      myChart.setOption(option);
    }
  },
};
 </script>

 <style>
 </style>
